import React, { Component } from 'react';
import { Select, Tooltip, Icon } from 'antd';

const { Option } = Select;

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_0z8pnv5z5v7c.js',
// });

class EditMultiline extends Component {
    constructor(props) {
        super(props);

        this.state = {
            obj: this.props.obj,
            isTitleClick: false,
            isSubmit: false
        }
    }

    handleChange = (value) => {
        let { obj } = this.state;

        if (value === '非必需') {
            obj.isRequired = false;
            this.setState({
                obj
            });
        } else {
            obj.isRequired = true;
            this.setState({
                obj
            });
        }
    }

    handleTitleClick = () => {
        this.setState({
            isTitleClick: true
        });
    }

    handleTitleChange = (e) => {
        let value = e.target.value;
        let length = value.length;
        this.input.style.width = length * 30 + 20 + 'px';

        let { obj } = this.state;
        obj.title = e.target.value;
        this.setState({
            obj
        });
    }

    handleBulr = () => {
        this.setState({
            isTitleClick: false
        });
    }

    // 在点击发布时，该组件向createQuestionContent组件传递信息
    handleSubmit = (obj, index) => {
        if (this.state.isSubmit === false) {
            this.props.handleInputData(obj, index);
        }

        this.setState({
            isSubmit: true
        });
    }

    // 在更新前调用
    componentWillUpdate() {
        if (this.props.isSubmit && this.state.isSubmit === false) {
            this.handleSubmit(this.state.obj, this.props.index)
        }
    }

    // 重置
    handleReset = () => {
        let { obj } = this.state;
        obj = {
            index: obj.index,
            title: '标题',
            isRequired: obj.isRequired,
            type: 'multiline',
        }

        this.setState({
            obj
        });
    }

    render() {
        return (
            <div style={{
                fontSize: 30,
                paddingLeft: 50,
                paddingBottom: 50,
                position: 'relative',
            }}>
                <div style={{
                    paddingTop: 20,
                    paddingBottom: 20
                }}>
                    <span style={{
                        fontWeight: 'bold'
                    }}>{`${this.props.index + 1}. `}</span>
                    <input
                        style={{
                            backgroundColor: (this.state.isTitleClick ? '#eee' : '#fff'),
                            outline: 'none',
                            border: 'none',
                            width: 80
                        }}
                        onClick={this.handleTitleClick}
                        value={this.state.obj.title}
                        onChange={(e) => this.handleTitleChange(e)}
                        ref={(input) => this.input = input}
                        onBlur={this.handleBulr}
                    />
                    <Select defaultValue="非必填" style={{ width: 120, marginLeft: 20 }} onChange={this.handleChange}>
                        <Option value='非必填'>非必填</Option>
                        <Option value='必填'>必填</Option>
                    </Select>
                </div>
                <div style={{
                    border: '1px solid #ccc',
                    height: 90,
                    width: 900,
                    color: '#ccc',
                    borderRadius: 5,
                    fontSize: 14,
                    paddingLeft: 20,
                    lineHeight: '30px'
                }}>
                    写点什么吧
                </div>
                <div style={{
                    width: 100,
                    display: 'flex',
                    justifyContent: 'space-between',
                    position: 'absolute',
                    right: 0,
                    marginRight: 40
                }}>
                    <Tooltip title="重置">
                        <span
                            className="anticon-portal anticonzhongzhi"
                            style={{
                                color: '#ccc'
                            }}
                            onClick={this.handleReset}
                        ></span>
                    </Tooltip>
                    <Tooltip title="删除">
                        <span
                            className="anticon-portal anticoncha"
                            style={{
                                color: '#ccc'
                            }}
                        ></span>
                    </Tooltip>
                </div>
            </div>
        );
    }
}

export default EditMultiline;